<template>
  <section class="profile">
    <h2 class="panel-title">
      基本资料
    </h2>
    <div class="user-data">
      <div class="user-avatar">
        <label>头像</label>
        <div class="examplel-img">
          <img :src="userData && userData.avatar" alt="">
        </div>
        <image2-base64
          class="btn-avatar"
          type="avatar"
          url="user/avatar"
          @imgUrl="updateUserAvatar"
        />
      </div>
      <div class="user-data-form">
        <el-form ref="form_userData" :model="form_userData" :rules="rules_userData">
          <el-form-item label="用户名" prop="name">
            <el-input v-model="form_userData.name" autocomplete="off" placeholder="用户名" />
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-select v-model="form_userData.sex" reserve-keyword placeholder="请选择您的性别">
              <el-option :key="'0'" :label="'女'" :value="'0'" />
              <el-option :key="'1'" :label="'男'" :value="'1'" />
            </el-select>
          </el-form-item>
          <el-form-item label="地区" prop="address">
            <el-input v-model="form_userData.address" autocomplete="off" placeholder="地区" />
          </el-form-item>
          <el-form-item label="职位" prop="job">
            <el-input v-model="form_userData.job" autocomplete="off" placeholder="职位" />
          </el-form-item>
          <el-form-item label="签名" prop="signature">
            <el-input
              v-model="form_userData.signature"
              type="textarea"
              autosize
              autocomplete="off"
              placeholder="签名"
            />
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="btn-panel">
      <el-button v-loading="loading" type="primary" @click="submitForm('form_userData')">
        保存
      </el-button>
    </div>
  </section>
</template>

<script>
import image2Base64 from '~/components/public/Image2Base64'

export default {
  middleware: 'isSignIn',
  layout: 'self',
  head() {
    return {
      title: '用户设置'
    }
  },
  components: {
    image2Base64
  },
  data() {
    const validateName = async (rule, value, callback) => {
      const params = {}
      if (value === '') {
        callback(new Error('请输入用户名'))
        return
      } else if (value === this.userData.name) {
        callback()
        return
      }
      params.name = value
      const data = await this.$request({
        context: this,
        method: 'get',
        url: 'user/checkUserName',
        params
      })
      if (data === false) {
        callback(new Error('用户名不可用'))
        return
      }
      callback()
    }

    return {
      loading: false,
      form_userData: {
        name: '',
        sex: '',
        signature: '',
        address: '',
        job: ''
      },
      rules_userData: {
        name: [
          {
            validator: validateName,
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    userData() {
      return this.$store.state.user.userData
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    updateUserAvatar(data) {
      const newUserData = {
        avatar: data
      }
      this.$store.commit('updateUserDataMutation', newUserData)
      this.$message.success('修改成功！')
    },
    initData() {
      this.form_userData.name = this.userData.name
      this.form_userData.sex = this.userData.sex
      this.form_userData.signature = this.userData.signature
      this.form_userData.address = this.userData.address
      this.form_userData.job = this.userData.job
    },
    async putUserData() {
      this.loading = true
      const params = this.form_userData
      const data = await this.$request({
        context: this,
        method: 'put',
        url: 'user/infos',
        params
      })
      if (!data) {
        this.loading = false
        return
      }
      this.successCalback(params)
    },
    successCalback(userData) {
      // 更新用户数据
      this.$store.commit('updateUserDataMutation', userData)
      this.loading = false
      this.$message.success('修改成功！')
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.putUserData()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "~@/assets/css/public";
  .profile {
    .user-data {
      margin-left: 160px;
      .user-data-form {

        /deep/ .el-form {
          .el-form-item {
            display: flex;
            margin-bottom: 30px;

            .el-form-item__content {
              width: 400px;
            }

            .el-form-item__label {
              display: inline-block;
              width: 100px;
              text-align: right;
              padding: 0 12px 0 0;
              margin-right: 80px;
            }
            .el-input__inner {
              border: none;
              border-bottom: 2px solid $theme-color-background!important;
              padding: 0 6px;
            }
            .el-form-item__error {
              color: #F07272;
              margin-left: 6px;
            }
          }
        }
      }

      .user-avatar {
        display: flex;
        align-items: center;
        height: 104px;
        margin-bottom: 30px;

        .examplel-img {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 30px;
          z-index: 1000;
          background: $theme-color-background;
          img {
            @include inner-img;
          }
        }

        label {
          box-sizing: border-box;
          display: inline-block;
          width: 100px;
          text-align: right;
          padding: 0 12px 0 0;
          margin-right: 80px;
        }
      }
    }

    .btn-panel {
      margin: 40px;
      display: flex;
      justify-content: center;
    }

    h2.panel-title {
      font-size: 16px;
      height: 42px;
      line-height: 42px;
      text-align: center;
      color: $theme-color;
      margin: 0 0 40px;
      border-bottom: 1px solid $theme-color-border;
    }
  }

</style>
